<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>年会抽奖</title>
    <style>
      .wrapper {
        width: 840px;
        height: 420px;
        background: url(./images/bg01.jpg) no-repeat center / cover;
        padding: 100px 250px;
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <strong>传智教育年会抽奖</strong>
      <h1>一等奖：<span id="one">???</span></h1>
      <h3>二等奖：<span id="two">???</span></h3>
      <h5>三等奖：<span id="three">???</span></h5>
    </div>
    <script>
      const persinArr = ['周杰伦', '刘德华', '张学友', '周星驰', '蔡徐坤']
      //产生一个随机数
      let first = Math.floor(Math.random() * persinArr.length) //0-4

      // console.log(persinArr)
      // console.log(uname)
      // 选择器 选中标签 添加内容
      const one = document.querySelector('#one')
      // console.log(one)
      one.innerHTML = persinArr[first]
      persinArr.splice(first, 1)
      //抽到之后把这个人给删除掉 //抽到的人删掉
      //
      //
      let second = Math.floor(Math.random() * persinArr.length)
      console.log(persinArr)
      const two = document.querySelector('#two')
      two.innerHTML = persinArr[second]
      persinArr.splice(second, 1) //抽到的人删掉

      // //
      // //
      let third = Math.floor(Math.random() * persinArr.length)
      console.log(persinArr)
      const three = document.querySelector('#three')
      three.innerHTML = persinArr[third]
      persinArr.splice(third, 1) //抽到的人删掉
    </script>
  </body>
</html>
